<template>
  <div>
    <div class="New">
      <p class="text1">新品上市</p>
      <div class="Newcontent">
        <div class="listone" v-for="(item, index) in newGoodses" :key="index" @click="ondetails1(index)">
          <img :src="item.goodsCoverImg" alt="" />
          <div class="title">{{ item.goodsName }}</div>
          <div>{{ item.sellingPrice }}</div>
        </div>
      </div>
    </div>
    <div class="New">
      <p class="text1">热门商品</p>
      <div class="Newcontent">
        <div class="listone" v-for="(item, index) in hotGoodses " :key="index" @click="ondetails2(index)">
          <img :src="item.goodsCoverImg" alt="" />
          <div class="title">{{ item.goodsName }}</div>
          <div>{{ item.sellingPrice }}</div>
        </div>
      </div>
    </div>
    <div class="New">
      <p class="text1">最新推荐</p>
      <div class="Newcontent">
        <div class="listone" v-for="(item, index) in recommendGoodses" :key="index" @click="ondetails3(index)">
          <img :src="item.goodsCoverImg" alt="" />
          <div class="title">{{ item.goodsName }}</div>
          <div>{{ item.sellingPrice }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHome } from '@/api/api'
export default {
  data () {
    return {
      hotGoodses: [],
      newGoodses: [],
      recommendGoodses: []
    }
  },
  beforeCreate () {
    getHome().then((res) => {
      console.log(res, 'res')
      this.hotGoodses = res.data.data.hotGoodses
      this.newGoodses = res.data.data.newGoodses
      this.recommendGoodses = res.data.data.recommendGoodses
    })
  },
  methods: {
    // 点击商品跳转到详情页,并把对应的ID传到详情页
    ondetails1 (index) {
      this.$router.push('/Details')
      let Id = this.hotGoodses[index].goodsId
      // 是由localStorage传输数据
      localStorage.setItem('Id', Id)
    },
    ondetails2 (index) {
      this.$router.push('/Details')
      // console.log('Id', this.newGoodses[index].goodsId)
      let Id = this.newGoodses[index].goodsId
      localStorage.setItem('Id', Id)
    },
    ondetails3 (index) {
      this.$router.push('/Details')
      // console.log('Id', this.recommendGoodses[index].goodsId)
      let Id = this.recommendGoodses[index].goodsId
      localStorage.setItem('Id', Id)
    }
  }
}
</script>

<style lang="less" scoped>
.New {
  width: 100%;
  background: #f9f9f9;
  .text1 {
    height: 1rem;
    width: 100%;
    text-align: center;
    line-height: 1rem;
    color: #6950a1;
  }
  .Newcontent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .listone {
      background: #fff;
      text-align: center;
      font-size: 0.3rem;
      width: 50%;
      padding: 0.2rem 0.2rem 0.2rem 0.2rem;
      box-sizing: border-box;
      border-right: 1px solid #f1f1f1;
      border-bottom: 1px solid #f1f1f1;
      img {
        width: 3rem;
        height: 3rem;
      }
      .title {
        margin-top: 0.5rem;
      }
    }
  }
}
</style>
